<template>
	<view style="float: left; padding-bottom: 150rpx;">
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="已完成" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="orderDetailsBox">
			<view class="userAndLabel">
				<view class="userBox">
					<text class="userAccount">mg_bg2sd80nxn</text>
					<text class="telPhone">联系方式：195****7243</text>
				</view>
				<view class="labelBox" v-if="true">
					<!-- <text class="labelRectangle">1111</text> -->
					<text class="labelRound">11</text>
					<text class="remove">删除</text>
				</view>
			</view>
			<view class="orderBox">
				<image class="icon" src="../../static/icons/order-ScanOrder.png"></image>
				<text class="type">扫码订单</text>
				<text class="money">¥ 9.60</text>
			</view>
			<view class="particularsBox">
				<view class="itemBox">
					<text class="title">现金支付</text>
					<text class="info">¥ 9.60</text>
				</view>
				<view class="itemBox">
					<text class="title">抵用券</text>
					<text class="info">0.00</text>
				</view>
				<view class="itemBox">
					<text class="title">服务费</text>
					<text class="info">-¥ 1.92</text>
				</view>
				<view class="itemBox">
					<text class="title">手续费</text>
					<text class="info">-¥ 0.00</text>
				</view>
				<view class="itemBox">
					<text class="title">收入</text>
					<text class="info">¥ 7.68</text>
				</view>
				<view class="itemBox">
					<text class="title">订单状态</text>
					<text class="info type">已提现</text>
				</view>
			</view>
			<view class="refundBox">
				<button class="refund">退款</button>
			</view>
		</view>
		<view class="integralInformationBox">
			<text class="moduleTitle">
				积分信息
				<text>补贴奖励详情</text>
			</text>
			<view class="itemBox">
				<text class="title">用户可得积分</text>
				<text class="info">1.92</text>
			</view>
			<view class="itemBox">
				<text class="title">商家可得积分</text>
				<text class="info">1.92</text>
			</view>
			<view class="itemBox">
				<text class="title">收款比例</text>
				<text class="info">20%</text>
			</view>
		</view>
		<view class="orderInformationBox">
			<text class="moduleTitle">订单信息</text>
			<view class="itemBox">
				<text class="title">订单号</text>
				<text class="info">1851479934774632453</text>
				<text class="copy">复制</text>
			</view>
			<view class="itemBox">
				<text class="title">交易流水号</text>
				<text class="info">-</text>
			</view>
			<view class="itemBox">
				<text class="title">下单时间</text>
				<text class="info">2024-10-31 12:23:09</text>
			</view>
			<view class="itemBox">
				<text class="title">支付时间</text>
				<text class="info">2024-10-31 12:23:09</text>
			</view>
			<view class="itemBox">
				<text class="title">备注</text>
				<text class="info">-</text>
			</view>
		</view>
		<view class="merchantRemarksBox">
			<text class="moduleTitle">商家备注</text>
			<view class="itemBox">
				<text class="time">2025-01-24 10:49:15</text>
				<uni-icons class="remove" type="trash" size="22" color="red"></uni-icons>
				<text class="remarks">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</text>
			</view>
			<view class="itemBox">
				<text class="time">2025-01-24 10:49:15</text>
				<uni-icons class="remove" type="trash" size="22" color="red"></uni-icons>
				<text class="remarks">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</text>
			</view>
			<view class="itemBox">
				<text class="time">2025-01-24 10:49:15</text>
				<uni-icons class="remove" type="trash" size="22" color="red"></uni-icons>
				<text class="remarks">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</text>
			</view>
			<view class="itemBox">
				<text class="time">2025-01-24 10:49:15</text>
				<uni-icons class="remove" type="trash" size="22" color="red"></uni-icons>
				<text class="remarks">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</text>
			</view>
		</view>
		<view class="actionBar">
			<button class="addIdentity">添加标识</button>
			<button class="merchantRemarks">商家备注</button>
		</view>
	</view>
</template>

<script>
	export default{
		onLoad(options){
			console.log(options)
		},
		data(){
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderDetailsBox{
		width: calc(100% - 50rpx);
		height: auto;
		padding: 25rpx;
		background-color: #fff;
		float: left;
		.userAndLabel{
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.userBox{
				width: 65%;
				height: 100%;
				float: left;
				.userAccount{
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 34rpx;
					float: left;
					color: rgb(50, 50, 50);
				}
				.telPhone{
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 25rpx;
					float: left;
					color: rgb(108, 108, 108);
				}
			}
			.labelBox{
				width: auto;
				height: 100rpx;
				float: right;
				display: flex;
				align-items: center;
				.labelRectangle{
					width: 190rpx;
					height: 65rpx;
					background-color: rgb(245, 245, 245);
					float: left;
					border-radius: 8rpx;
					border-width: 1rpx;
					border-style: solid;
					border-color: rgb(225, 225, 225);
					line-height: 65rpx;
					text-align: center;
					font-size: 26rpx;
				}
				.labelRound{
					width: 80rpx;
					height: 80rpx;
					background-color: rgb(245, 245, 245);
					float: left;
					border-radius: 50%;
					border-width: 1rpx;
					border-style: solid;
					border-color: rgb(225, 225, 225);
					line-height: 80rpx;
					text-align: center;
					font-size: 26rpx;
				}
				.remove{
					width: auto;
					padding: 15rpx;
					font-size: 26rpx;
					color: rgb(155, 155, 155);
				}
			}
		}
		.orderBox{
			width: 100%;
			height: 100rpx;
			float: left;
			border-bottom: 1rpx solid #f5f5f5;
			.icon{
				width: 60rpx;
				height: 60rpx;
				float: left;
				margin-top: 20rpx;
			}
			.type{
				width: auto;
				float: left;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 34rpx;
				color: rgb(67, 67, 67);
			}
			.money{
				width: auto;
				height: 100rpx;
				line-height: 100rpx;
				float: right;
				font-size: 42rpx;
				font-weight: bold;
				color: #333;
			}
		}
		.particularsBox{
			width: 100%;
			height: auto;
			float: left;
			.itemBox{
				width: 100%;
				height: 73rpx;
				float: left;
				display: flex;
				align-items: center;
				.title{
					width: auto;
					float: left;
					font-size: 28rpx;
					color: rgb(158, 158, 158);
				}
				.info{
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					color: rgb(52, 52, 52);
				}
				.type{
					color: red;
					font-weight: bold;
				}
			}
		}
		.refundBox{
			width: 100%;
			height: 95rpx;
			border-top:1rpx solid #f5f5f5;
			float: left;
			.refund{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				float: left;
				margin-top: 25rpx;
				color: #fff;
				background-color: #ffbc04;
			}
			.refund::after{
				border-width: 0rpx;
			}
		}
	}
	.integralInformationBox{
		width: calc(100% - 50rpx);
		padding: 25rpx;
		background-color: #fff;
		margin-top: 20rpx;
		float: left;
		.moduleTitle{
			width: 100%;
			height: 70rpx;
			line-height: 45rpx;
			font-size: 32rpx;
			float: left;
			border-bottom: 1rpx solid #f5f5f5;
			color: rgb(51, 51, 51);
			text{
				width: auto;
				float: right;
				font-size: 27rpx;
				color: #ffbc04;
			}
		}
		.itemBox{
			width: 100%;
			height: 53rpx;
			margin-top:15rpx;
			float: left;
			display: flex;
			align-items: center;
			.title{
				width: auto;
				float: left;
				font-size: 28rpx;
				color: rgb(158, 158, 158);
			}
			.info{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: rgb(154, 154, 154);
			}
		}
	}
	.orderInformationBox{
		width: calc(100% - 50rpx);
		padding: 25rpx;
		background-color: #fff;
		margin-top: 20rpx;
		float: left;
		.moduleTitle{
			width: 100%;
			height: 70rpx;
			line-height: 45rpx;
			font-size: 32rpx;
			float: left;
			border-bottom: 1rpx solid #f5f5f5;
			color: rgb(51, 51, 51);
		}
		.itemBox{
			width: 100%;
			height: 53rpx;
			margin-top:15rpx;
			float: left;
			display: flex;
			align-items: center;
			.title{
				width: auto;
				float: left;
				font-size: 28rpx;
				color: rgb(158, 158, 158);
			}
			.info{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: rgb(52, 52, 52);
			}
			.copy{
				width: auto;
				padding-left: 10rpx;
				font-size: 28rpx;
				float: right;
				color: #ffbc04;
			}
		}
	}
	.merchantRemarksBox{
		width: calc(100% - 50rpx);
		padding: 25rpx;
		background-color: #fff;
		margin-top: 20rpx;
		float: left;
		.moduleTitle{
			width: 100%;
			height: 70rpx;
			line-height: 45rpx;
			font-size: 32rpx;
			float: left;
			border-bottom: 1rpx solid #f5f5f5;
			color: rgb(51, 51, 51);
		}
		.itemBox{
			width: 100%;
			height: auto;
			float: left;
			padding: 20rpx 0rpx;
			border-bottom: 1rpx dashed #f5f5f5;
			.time{
				width: 85%;
				float: left;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				color: rgb(158, 158, 158);
			}
			.remove{
				float: right;
			}
			.remarks{
				width: 100%;
				height: auto;
				float: left;
				line-height: 30rpx;
				font-size: 25rpx;
				margin-bottom: 5rpx;
				color: rgb(51, 51, 51);
			}
		}
		.itemBox:last-child{
			border-width: 0rpx;
			padding-bottom: 0rpx;
		}
	}
	
	.actionBar{
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,0.1);
		position: fixed;
		bottom: 0;
		.addIdentity{
			width: calc(50% - 30rpx);
			float: left;
			margin-left: 20rpx;
			height: 80rpx;
			margin-top: 15rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #fff;
			background-color: #ffbc04;
			font-weight: bold;
		}
		.merchantRemarks{
			width: calc(50% - 30rpx);
			float: right;
			margin-right: 20rpx;
			height: 80rpx;
			margin-top: 15rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #fff;
			background-color: #ffbc04;
			font-weight: bold;
		}
		.addIdentity::after,.merchantRemarks::after{
			border-width: 0rpx;
		}
	}
</style>